<template>
	<view class="container">
		<view class="lists">
			<view v-if="datas.length == 0">
				<emptyPage :title="$t(`暂无数据~`)"></emptyPage>
			</view>
			<!-- <view class="item" v-for="n in datas"> -->
			<view class="item" @click="gotoDetail(item)" v-for="item in datas">
				<view class="top-bg">
					<image :src="item.avatar" class="cover"></image>
					<view class="right-info">
						<view class="name-bg">
							<view class="name">{{item.real_name}}</view>
							<view class="verify">{{item.score}}分</view>
						</view>
						<view class="card">
							<view class="level" v-for="t in item.tecs">{{t.title}}</view>
						</view>
					</view>
					<view class="call-bg">
						<image class="call" src="../../static/images/call.png"></image>
					</view>
				</view>
				<view class="bottom-bg">
					<view class="tags">
						<view class="tag" v-for="i in item.items">{{i.name}}</view>
					</view>
					<view class="desc">
						<view class="order_bg">
							<image class="o_icon" src="../../static/images/bao.png"></image>
							<view class="text">单量：{{item.total}}</view>
						</view>
						<view class="coll_bg">
							<image class="o_icon" src="../../static/images/bao.png"></image>
							<view class="text">收藏：{{item.collec}}</view>
						</view>
					</view>
				</view>
			</view><!-- item end -->
			
		</view><!--lists end-->
	</view>
</template>

<script>
	import {rec_tecer_list} from "@/api/platform.js";
	import emptyPage from '@/components/emptyPage';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				datas:[],//推荐门店
				operationing:false,
				page:1,
				limit:10,
				hasMore:true,
			}
		},
		onLoad(options) {
			this.getData();
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.page = 1;
			this.hasMore = true;
			this.getData();
		},
		onReachBottom() {
			if(this.hasMore){
				this.page++;
				this.getData();
			}
		},
		methods: {
			gotoDetail(id){
				uni.navigateTo({
					url:'/pages/users/tecer/project/add?id='+id
				})
			},
			gotoTemp(){
				uni.navigateTo({
					url:'/pages/users/tecer/project/add'
				})
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				rec_tecer_list({page:that.page,limit:that.limit}).then((res) => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					let data = res.data;
					 console.info(data);
					 if(that.page > 1){
						 that.datas.concat(data.list);
					 }else{
						 that.datas = data.list;
					 }
					 if(data.list.length == that.limit){
						 that.hasMore = true;
					 }else{
						 that.hasMore = false;
					 }
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.lists{
			display: flex;
			flex-direction: column;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100rpx;
			
			background-color: white;
			margin-top: 15rpx;
			.item{
				display: flex;
				flex-direction: column; 
				// margin-bottom: 30rpx;
				padding: 30rpx;
				border-bottom: 1rpx solid #f1f1f1;
				
				.top-bg{
					display: flex;
					flex-direction: row; 
					.cover{
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
						background-color: #f1f1f1;
					}
					.right-info{
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 15rpx;
						.name-bg{
							display: flex;
							flex-direction: row;
							align-items: center;
							.name{
								font-size: 28rpx;
								font-weight: bold;
								color: black;
							}
							.verify{
								font-size: 28rpx;
								font-weight: bold;
								color: #93ce9b;
								background-color: #f4f5ef;
								padding: 0rpx 10rpx;
								border-radius: 10rpx;
								margin-left: 15rpx;
							}
						}
						
						.card{
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							margin-top: 10rpx;
							.level{
								padding: 5rpx 10rpx;
								background-color: #e9f1f6;
								color: #5792db;
								font-size: 28rpx;
								margin-right: 10rpx;
								border-radius: 10rpx;
							}
						}
					}//right-info end
					.call-bg{
						width: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						.call{
							width: 60rpx;
							height:60rpx;
						}
					}
				}
				.bottom-bg{
					margin-top: 15rpx;
					display: flex;
					flex-direction: column;
					.tags{
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						margin-top: 15rpx;
						.tag{
							padding: 5rpx 10rpx;
							background-color: #e9f1f6;
							color: #5792db;
							font-size: 28rpx;
							margin-right: 10rpx;
							border-radius: 10rpx;
						}
					}
					.desc{
						display: flex;
						flex-direction: row;
						margin-top: 30rpx;
						align-items: center;
						.order_bg{
							display: flex;
							flex-direction: row;
							align-items: center;
							.o_icon{
								width: 28rpx;
								height:28rpx;
							}
							.text{
								font-size: 24rpx;
								color: dimgray;
								margin-left: 10rpx;
							}
						}
						.coll_bg{
							margin-left: 30rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							.o_icon{
								width: 28rpx;
								height:28rpx;
							}
							.text{
								font-size: 24rpx;
								color: dimgray;
								margin-left: 10rpx;
							}
						}
					}
				}
				
				.right{
					margin-left: 15rpx;
					width: 80rpx;
					color: gray;
					font-size: 28rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}//item end
		}//lists end
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	
</style>
